<template>
<div>

<el-row :gutter="20">
  <el-col :span="20">
	<el-form 
		label-width="180px"
		>

		<el-form-item label="推广信息：">
	    	<el-card class="box-card mb10"
	    	v-for="(item, index) in words"
	    	>

			  	<p v-html="item"></p>

			  	<el-button-group >
				  <el-button type="primary" size="mini" icon="el-icon-caret-top"
				  v-if="index != 0"
				  @click="detailUp(index)"
				  ></el-button>
				  <el-button type="primary" size="mini" icon="el-icon-caret-bottom"
				  v-if="index != words.length - 1"
				  @click="detailDown(index)"
				  ></el-button>
				  <el-button type="primary" size="mini" icon="el-icon-delete"
				  @click="detailDel(index)"
				  ></el-button>
				</el-button-group>

			</el-card>

			
	  	</el-form-item>

		<el-form-item label="推广信息：">
	    	<el-input type="textarea" v-model="info"></el-input>
	    	
	  	</el-form-item>

		<el-form-item>
			<el-button type="success" 
			  @click="addWords()"
			  >添加推广信息</el-button>
		    <el-button type="primary" 
		     @click="save()">
		     保存</el-button>
		</el-form-item>

	</el-form>	

  </el-col>
  <el-col :span="4">
  	
  </el-col>
</el-row>





</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'materials',
	
	data () {

		return {
		  	words : (() => {
		  		var words = [];
				try {
					words = this.productDetail.words.split(',');
				} catch (err) {
					//console.log(err);
				}
				return words;
		  	})(),
		  	info : '',

		}
	},

	props : {
		productDetail : Object,
	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		detailDel (index){
			this.words.splice(index, 1);
		},

		detailDown (index){
			this.words[index] = this.words.splice(index + 1, 1, this.words[index])[0];
		},

		detailUp (index){
			this.words[index] = this.words.splice(index - 1, 1, this.words[index])[0];
		},

		addWords () {
			this.words.push(this.info);
			this.info = '';
		},

		save () {
			var text_txt = '';
			for(var i = 0, j = this.words.length; i < j; i++){
				text_txt += this.words[i] + (i == j - 1 ? '' : ',');
			}

			let para = {
				id : this.productDetail.id,
				sale_code : this.productDetail.sale_code,
				words : text_txt,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			this.$store.dispatch('updateProduct_words', para);
		}
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>

</style>
